<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->

<form *ngIf="!isLoading" autocomplete="off" [formGroup]="defaultConfigForm" (ngSubmit)="submitForm()">
  <h1>Sharding Tags</h1>

  <h4>Copy/paste the sharding tag's id to the API gateway configuration file in order to manage API deployments.</h4>

  <mat-card class="org-settings-tags__tags-card">
    <mat-card-content>
      <div class="org-settings-tags__add-button-container" *gioPermission="{ anyOf: ['organization-tag-c'] }">
        <h2>Tags</h2>
        <button
          [gioLicense]="shardingTagsLicenseOptions"
          (click)="onAddTagClicked()"
          mat-raised-button
          color="primary"
          aria-label="Button to add a tag"
          type="button"
        >
          <mat-icon>add</mat-icon>Add a tag
          <mat-icon *ngIf="hasShardingTagsLock$ | async" iconPositionEnd svgIcon="gio:lock"></mat-icon>
        </button>
      </div>
    </mat-card-content>
    <gio-table-wrapper [length]="tagsTableUnpaginatedLength" (filtersChange)="onTagsFiltersChanged($event)">
      <table
        mat-table
        [dataSource]="filteredTagsTableDS"
        matSort
        matSortActive="name"
        matSortDirection="asc"
        class="tags-table"
        id="tagsTable"
        aria-label="Tags table"
      >
        <!-- Id Column -->
        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef id="id" mat-sort-header>Id</th>
          <td mat-cell *matCellDef="let tag">
            <span gioClipboardCopyWrapper [contentToCopy]="tag.id">{{ tag.id }}</span>
          </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef id="name" mat-sort-header>Name</th>
          <td mat-cell *matCellDef="let tag">{{ tag.name }}</td>
        </ng-container>

        <!-- Description Column -->
        <ng-container matColumnDef="description">
          <th mat-header-cell *matHeaderCellDef id="description" mat-sort-header>Description</th>
          <td mat-cell *matCellDef="let tag">{{ tag.description }}</td>
        </ng-container>

        <!-- Restricted groups Column -->
        <ng-container matColumnDef="restrictedGroupsName">
          <th mat-header-cell *matHeaderCellDef id="restrictedGroupsName" mat-sort-header>Restricted groups</th>
          <td mat-cell *matCellDef="let tag">{{ tag.restrictedGroupsName.join(', ') }}</td>
        </ng-container>

        <!-- Actions Column -->
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef id="actions"></th>
          <td mat-cell *matCellDef="let tag">
            <div class="centered-cell">
              <ng-container *gioPermission="{ anyOf: ['organization-tag-u'] }">
                <button
                  (click)="onEditTagClicked(tag)"
                  mat-icon-button
                  type="button"
                  aria-label="Button to edit a tag"
                  matTooltip="Edit tag"
                >
                  <mat-icon>edit</mat-icon>
                </button>
              </ng-container>
              <ng-container *gioPermission="{ anyOf: ['organization-tag-d'] }">
                <button
                  (click)="onDeleteTagClicked(tag)"
                  mat-icon-button
                  type="button"
                  aria-label="Button to delete a tag"
                  matTooltip="Delete tag"
                >
                  <mat-icon>delete</mat-icon>
                </button>
              </ng-container>
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="tagsTableDisplayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: tagsTableDisplayedColumns"></tr>

        <tr class="mat-mdc-row mdc-data-table__row" *matNoDataRow>
          <td class="mat-mdc-cell mdc-data-table__cell" [attr.colspan]="tagsTableDisplayedColumns.length">No tag</td>
        </tr>
      </table>
    </gio-table-wrapper>
  </mat-card>

  <mat-card class="org-settings-tags__entrypoints-card">
    <mat-card-content class="org-settings-tags__entrypoints-card__content">
      <div class="org-settings-tags__add-button-container">
        <h2>Entrypoint mappings</h2>

        <button
          *gioPermission="{ anyOf: ['organization-entrypoint-c'] }"
          (click)="onAddEntrypointClicked()"
          mat-raised-button
          color="primary"
          type="button"
          aria-label="Button to add a mapping"
        >
          <mat-icon>add</mat-icon>Add a mapping
        </button>
      </div>

      <mat-form-field [matTooltip]="providedConfigurationMessage" [matTooltipDisabled]="!isReadonlySetting('entrypoint')">
        <mat-icon *ngIf="isReadonlySetting('entrypoint')" class="org-settings-tags__entrypoints-card__content__form-field__icon" matPrefix
          >lock</mat-icon
        >
        <mat-label>Default entrypoint</mat-label>
        <input #entrypointInput matInput formControlName="entrypoint" />
        <gio-clipboard-copy-icon matSuffix [contentToCopy]="entrypointInput.value"></gio-clipboard-copy-icon>
      </mat-form-field>

      <mat-form-field [matTooltip]="providedConfigurationMessage" [matTooltipDisabled]="!isReadonlySetting('tcpPort')">
        <mat-icon *ngIf="isReadonlySetting('tcpPort')" class="org-settings-tags__entrypoints-card__content__form-field__icon" matPrefix
          >lock</mat-icon
        >
        <mat-label>Default TCP port</mat-label>
        <input #tcpPortInput matInput formControlName="tcpPort" type="number" />
        <mat-error *ngIf="defaultConfigForm.get('tcpPort').hasError('invalidTcpPort')"
          >TCP port should be in range between 1025 and 65535</mat-error
        >
        <gio-clipboard-copy-icon matSuffix [contentToCopy]="tcpPortInput.value"></gio-clipboard-copy-icon>
      </mat-form-field>
    </mat-card-content>
    <gio-table-wrapper [length]="entrypointsTableUnpaginatedLength" (filtersChange)="onEntrypointsFiltersChanged($event)">
      <table
        mat-table
        [dataSource]="filteredEntrypointsTableDS"
        matSort
        class="entrypoints-table"
        id="entrypointsTable"
        aria-label="Entrypoints table"
      >
        <!-- Entrypoint Column -->
        <ng-container matColumnDef="entrypoint">
          <th mat-header-cell *matHeaderCellDef id="entrypoint" mat-sort-header="url">Entrypoint</th>
          <td mat-cell *matCellDef="let entrypoint">
            <span gioClipboardCopyWrapper [contentToCopy]="entrypoint.url">{{ entrypoint.url }}</span>
          </td>
        </ng-container>

        <!-- Tags Column -->
        <ng-container matColumnDef="tags">
          <th mat-header-cell *matHeaderCellDef id="tags" mat-sort-header="tags">Tags</th>
          <td mat-cell *matCellDef="let entrypoint">{{ entrypoint.tagsName.join(', ') }}</td>
        </ng-container>

        <!-- Actions Column -->
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef id="actions"></th>
          <td mat-cell *matCellDef="let entrypoint">
            <div class="centered-cell">
              <ng-container *gioPermission="{ anyOf: ['organization-entrypoint-u'] }">
                <button
                  (click)="onEditEntrypointClicked(entrypoint)"
                  mat-icon-button
                  type="button"
                  aria-label="Button to edit a mapping"
                  matTooltip="Edit mapping"
                >
                  <mat-icon>edit</mat-icon>
                </button>
              </ng-container>
              <ng-container *gioPermission="{ anyOf: ['organization-entrypoint-d'] }">
                <button
                  (click)="onDeleteEntrypointClicked(entrypoint)"
                  mat-icon-button
                  type="button"
                  aria-label="Button to delete a mapping"
                  matTooltip="Delete mapping"
                >
                  <mat-icon>delete</mat-icon>
                </button>
              </ng-container>
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="entrypointsTableDisplayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: entrypointsTableDisplayedColumns"></tr>

        <tr class="mat-mdc-row mdc-data-table__row" *matNoDataRow>
          <td class="mat-mdc-cell mdc-data-table__cell" [attr.colspan]="entrypointsTableDisplayedColumns.length">No entrypoint</td>
        </tr>
      </table>
    </gio-table-wrapper>
  </mat-card>

  <gio-save-bar [creationMode]="false" [form]="defaultConfigForm" [formInitialValues]="initialDefaultConfigFormValues"> </gio-save-bar>
</form>
